<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>订单信息</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-descriptions title="订单概览" :column="1" border>
            <el-descriptions-item label="订单编号">{{ orderInfo.orderId }}</el-descriptions-item>
            <el-descriptions-item label="下单时间">{{ orderInfo.orderTime }}</el-descriptions-item>
            <el-descriptions-item label="支付时间">{{ orderInfo.payTime }}</el-descriptions-item>
            <el-descriptions-item label="支付方式">{{ orderInfo.payMethod }}</el-descriptions-item>
            <el-descriptions-item label="订单状态">{{ orderInfo.orderStatus }}</el-descriptions-item>
            <el-descriptions-item label="配送状态">{{ orderInfo.deliveryStatus }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions title="患者信息" :column="1" border>
            <el-descriptions-item label="姓名">{{ orderInfo.patientName }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{ orderInfo.gender }}</el-descriptions-item>
            <el-descriptions-item label="出生日期">{{ orderInfo.birthDate }}</el-descriptions-item>
            <el-descriptions-item label="身份证号">{{ orderInfo.idNumber }}</el-descriptions-item>
            <el-descriptions-item label="电话">{{ orderInfo.phone }}</el-descriptions-item>
            <el-descriptions-item label="邮箱">{{ orderInfo.email }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="12">
          <el-descriptions title="地址信息" :column="1" border>
            <el-descriptions-item label="地址">{{ orderInfo.address }}</el-descriptions-item>
            <el-descriptions-item label="详细地址">{{ orderInfo.detailAddress }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="12">
          <el-descriptions title="商品详情" :column="1" border>
            <el-descriptions-item label="商品图片">
              <el-image :src="orderInfo.productImage" :preview-src-list="[orderInfo.productImage]" style="width: 100px; height: 100px;"></el-image>
            </el-descriptions-item>
            <el-descriptions-item label="商品名称">{{ orderInfo.productName }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top: 20px">
        <el-col :span="12">
          <el-descriptions title="评分与评论" :column="1" border>
            <el-descriptions-item label="评分">
              <el-rate v-model="orderInfo.rating" disabled></el-rate>
            </el-descriptions-item>
            <el-descriptions-item label="评论">{{ orderInfo.comment }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
      <div style="margin-top: 20px;">
        <el-button type="primary" @click="$router.go(-1)">返回</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "OrderDetail",
  data() {
    return {
      orderInfo: {
        orderId: "",
        orderTime: "",
        payTime: "",
        payMethod: "",
        orderStatus: "",
        deliveryStatus: "",
        patientName: "",
        gender: "",
        birthDate: "",
        idNumber: "",
        phone: "",
        email: "",
        address: "",
        detailAddress: "",
        productImage: "https://example.com/mountain.png", // 默认图片
        productName: "",
        rating: 5,
        comment: "非常满意，服务周到，及时回复"
      }
    };
  },
  created() {
    this.getOrderDetail();
  },
  methods: {
    getOrderDetail() {
      const orderId = this.$route.query.orderId; // 从路由参数获取订单ID

      // 为了示例，这里使用模拟数据
      this.orderInfo = {
        orderId: orderId || "",
        orderTime: "",
        payTime: "",
        payMethod: "",
        orderStatus: "",
        deliveryStatus: "",
        patientName: "",
        gender: "",
        birthDate: "",
        idNumber: "",
        phone: "",
        email: "",
        address: "",
        detailAddress: "",
        productImage: "https://example.com/mountain.png",
        productName: "",
        rating: null,
        comment: ""
      };
    }
  }
};
</script>

<style scoped>
.box-card {
  margin-top: 20px;
}
</style>
